<template>
	<div class="NavBar" style="display: flex;">
		<div style="line-height: 100px;"></div>
		<el-menu class="el-menu-demo" mode="horizontal" 
		 router >
			<el-menu-item index="/Home" style="margin-right: 90px;">首页</el-menu-item>
			<el-menu-item index="/FarmPage" style="margin-right: 90px;">农产品</el-menu-item>
			<el-menu-item index="/HouesPage" style="margin-right: 90px;">农家乐</el-menu-item>
			<el-menu-item index="/ScenicSpots" style="margin-right: 90px;">旅游景点</el-menu-item>
			<el-menu-item index="/MoresCulture" style="margin-right: 90px;">风俗文化</el-menu-item>
			<el-menu-item index="/Communication" style="margin-right: 90px;">交流中心</el-menu-item>
			<el-menu-item index="/ShopCart">购物车</el-menu-item>
		</el-menu>
		<div class="login">
			<template v-if="$store.getters.gettoken">
				<el-dropdown trigger="click" @command="handleCommand">
					<el-avatar class="avatar" :src="'/api/file/'+userInfo.avatar" :fit="fits"></el-avatar>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="UserIndex">个人信息</el-dropdown-item>
						<el-dropdown-item command="OrderInfo">我的订单</el-dropdown-item>
						<el-dropdown-item command="UserAddress">收货地址</el-dropdown-item>
						<el-dropdown-item command="MyReservation">我的预约</el-dropdown-item>
						<el-dropdown-item command="MyIssuePosts">我的帖子</el-dropdown-item>
						<el-dropdown-item command="MyFavorite">我的收藏</el-dropdown-item>
						<el-dropdown-item command="logout">注销</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</template>
			<template v-else>
				<router-link to="/Login" style="font-size: 20px;
					font-weight: bold;
					color: #000000;
					text-decoration: none;">登录</router-link>
			</template>
		</div>
	</div>
</template>

<script>
	import LoginApi from "../../api/login.js"
	export default {
		data() {
			return{
				userInfo:{},
				fits:'cover'
			}
		},
		methods: {
			handleCommand(command) {
				if("logout" == command){
					this.logout()
				}
				if("UserIndex"== command){
					this.UserIndex()
					this.$store.commit("updatePublishActiveIndex", "/UserIndex");
				}
				if("OrderInfo" == command){
					this.OrderInfo()
					this.$store.commit("updatePublishActiveIndex", "/OrderInfo");
				}
				if("UserAddress" == command){
					this.UserAddres()
					this.$store.commit("updatePublishActiveIndex", "/UserAddress");
				}
				if("MyReservation" == command){
					this.MyReservation()
					this.$store.commit("updatePublishActiveIndex", "/MyReservation");
				}
				if("MyIssuePosts" == command){
					this.MyIssuePosts()
					this.$store.commit("updatePublishActiveIndex", "/MyIssuePosts");
				}
				if("MyFavorite" == command){
					this.MyFavorite()
					this.$store.commit("updatePublishActiveIndex", "/MyFavorite");
				}
			},
			async logout() {
				const res = await LoginApi.logout("/Login/logout")
				if(res.code==200){
					localStorage.removeItem("userInfo");
					localStorage.removeItem("token");
					this.$router.push("/Home").catch(err => err);
					window.location.reload();
					this.$message({
					    showClose: true,
					    message: '注销成功',
					    type: 'success'
					});
				}
				
			},
			UserIndex(){
				this.$router.push("/UserIndex").catch(err => err);
			},
			OrderInfo(){
				this.$router.push("/OrderInfo").catch(err => err);
			},
			UserAddres(){
				this.$router.push("/UserAddress").catch(err => err);
			},
			MyReservation(){
				this.$router.push("/MyReservation").catch(err => err);
			},
			MyIssuePosts(){
				this.$router.push("/MyIssuePosts").catch(err => err);
			},
			MyFavorite(){
				this.$router.push("/MyFavorite").catch(err => err);
			},
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
		}
	}
</script>

<style lang="scss" scoped>
	.NavBar {
		height: 100px;
		position: relative;
		.el-menu-demo{
			
			top: 20%;
			position: absolute;
			left: 15%;
			.el-menu-item {
				font-size: 20px; 
			}
			
		}
		.login{
			position: absolute;
			left: 90%;
			bottom: 40%;
		}
		.el-dropdown {
			position: absolute;
			right: 10%;
			bottom: 80%;
			transform: translateY(40%);
			.avatar{
				width: 55px;
				height: 55px;
			}
		}
	}
</style>